<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./vue.js"></script>
</head>

<body>
    <div id="app">
        <!--
            @click="简单js代码": 逻辑简单
            @click="方法名": 默认传递event参数
            @click="方法名()": 没有参数传递
            @click="方法名(para1,para2,...)": 传递自己需要的参数;
            如果需要event,可以再参数中添加$event
        -->
        <button @click="say('lucy',$event)">按钮绑定点击事件</button>

        <!--在输入框输入内容,点击enter键提交-->
        <input type="text" @keyup.enter="submit">   <br><br>
        <!--
            v-model 
            双向绑定: 模型中数据变化,视图会自动更新,
                      视图上输入发生变化,模型中数据会对应更新
            vue.js中双向绑定通过v-model指令实现
        -->

        <!--输入框-->
        <input type="text" v-model="message" placeholder="输入内容">
        <input type="text" v-model.lazy="message" placeholder="输入内容">
        <p>message is:{{message}}</p>

        <!-- .number 只能输入number数字类型-->
        <input type="number" v-model.number="age" >
        <p>age:{{age}}</p>
        <!--文本域-->
        <textarea v-model="text" name="" id="" cols="30" rows="10"></textarea>
        <p>text的值是:{{text}}</p>

        <!--单个勾选框-->
        <input type="checkbox" id="checkbox" v-model="checked">
        <label for="checkbox">{{checked}}</label>   <br><br>

        <!--多个勾选框，绑定到同一个数组-->
        <input type="checkbox" id="aa" value="6666" v-model="checkNames">
        <label for="aa">444</label>
        <input type="checkbox" id="bb" value="bb" v-model="checkNames">
        <label for="bb">bb</label>
        <input type="checkbox" id="cc" value="cc" v-model="checkNames">
        <label for="cc">cc</label><br><br>
        <span>checkNames:{{checkNames}}</span> <br><br>

        <!--单选-->
        <input type="radio" id="a" value="female" v-model="picks">
        <label for="a">男</label>
        <input type="radio" id="b" value="male" v-model="picks">
        <label for="b">女</label><br><br>
        <span>picks:{{picks}}</span><br><br>

        <!--单选列表-->
        <select  v-model="danXuan">
            <option>1</option>
            <option >2</option>
            <option >3</option>
            <option >4</option>
        </select>
        <span>danXuan:{{danXuan}}</span><br><br>

        <!--下拉列表-->
        <select v-model="selected" >
            <option v-for="option in options" v-bind:value="option.value">
                {{option.text}}
            </option>
        </select>
        <span> selected: {{selected}}</span><br><br>

        <input type="checkbox" v-model="toggle"
        v-bind:true-value="a" v-bind:false-value="b">
        <p>toggle的值为: {{toggle}}</p>

    </div>

    <script >
        var app =new Vue({
            el:'#app',
            data:{
                message: 'kangkang',
                text:'',
                checked:false,
                checkNames:[],
                age:'sb',
                picks:'',
                danXuan:1,
                selected:'A',
                options:[
                    {text:'first',value:'A'},
                    {text:'second',value:'B'},
                    {text:'third',value:'C'},
                ],
                a:'骚硕',
                b:'小许子',
                toggle:'饭岛爱'
            },
            methods:{
                say: function (event){
                    alert("hello");
                    console.log(event);
                    console.log(name);
                },
                submit: function (){
                    alert("-----------")
                    console.log('提交数据');
                    
                }
            }
        })
    </script>
</body>

</html>